<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>手动轮播</title>
		<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
		<style>
			.show {
				float: left;
				width:200px;
				background: salmon;
				overflow: hidden;
			}
			
			.box {
				width: 800px;
				background: sandybrown;
				position: relative;
				float: left;
			}
			
			
			
			
			  
			.a {
				width: 200px;
				height: 200px;
				background: darkblue;
				float: left;
			}
		</style>
	</head>

	<body>
		<div class="show">
			<div class="box">
				<div class="a" style="background-color: salmon;"></div>
				<div class="a" style="background-color: gold;"></div>
				<div class="a" style="background-color: darkcyan;"></div>
				<div class="a" style="background-color: brown;"></div>
			</div>
		</div>

		<input type="button" name="" id="" value="1" />
		<input type="button" name="" id="" value="2" />
		<input type="button" name="" id="" value="3" />
		<input type="button" name="" id="" value="4" />
		<script>
			var n = 0

			function run() {
				if(n < 3) {
					n++
				} else {
					n = 1;
					$(".box").css({
						left: 0
					})
				}
				$(".box").stop(true, true).animate({
					left: -200 * n
				}, 500)
			}
			var q = setInterval(run, 2000)
			$("input").click(function() {
				clearInterval(q)
				n = $("input").index(this)
				$(".box").stop(true, true).animate({
					left: -200 * n
				}, 500)
				setTimeout(function() {
					clearInterval(q)
					q = setInterval(run, 2000)
				}, 4000)
			})
		</script>
	</body>

</html>